<!DOCTYPE html>
<html>
    <head>
        <title>My Game</title>
        <style>
            #main{
                width:800px;
                height: 600px;
                background-color: black;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                background-image:url(./imgs/背景.jpg);
                background-size: 100% 100%;
               
            }
            #girl{
                width: 80px;
                height: 80px;
                position: absolute;
                bottom: 55px;
                left:360px;
                
            }
           .goright{
               transform: rotateY(180deg);
           }
           .star{
                width: 40px;
                height: 40px;
                position: absolute;
                top: 0px;
                left:360px;
            }
            #startBtn{
                display: block;
                width: 80px;
                line-height: 80px;
                text-align: center;
                background-color: #d0ff00;
                color: red;
                border:10px solid #32eeee;
                border-radius: 50%;
                position: relative;
                margin:10px;
            }
            #startBtn:hover{
                background-color: #ff0000;
                border: 10px solid #d0ff00;
                color:Black;
                cursor: pointer;
                box-shadow: 10px 10px 10px rgba(255,255,255,0.5);
                top:5px;
                left:5px;
                transform: scale(1.1);
            }
            #bd1{
                width: 300px;
                height: 25px;
                background-color: yellow;
                position: absolute;
                right:10px;
                top:10px;
                border-radius: 12px;
            }
            #bd2{
                width: 50%;
                height:100%;
                background-color: red;
                border-radius: 12px;
            }
            
            .c{
                /* animation: zd 0.05s ease 0s 10 ; */
            }

            @keyframes zd{
                0%{transform: rotate(0deg);}
                50%{transform: rotate(1deg);}
                75%{transform: rotate(0deg);}
                100%{transform: rotate(-1deg);}
            }

        </style>
    </head>
    <body>
        <div id="main">
           <span id="startBtn" onclick="startGame()">START</span>
           <div id="bd1">
              <div id="bd2"></div>
           </div>
           <!-- <img id="girl" src="imgs/girl.gif"/> -->
           <audio id="audio" src="mp3/t.mp3"></audio>
        </div>
        <script type="module" src="./main.js"></script>
    </body>
</html>